<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>脚本管理</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/common.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="header-nav">
        <h1>脚本管理</h1>
        <div class="nav-links">
            <a href="{{ url_for('home') }}" class="nav-btn">返回首页</a>
            <a href="{{ url_for('manage_venvs') }}" class="nav-btn">虚拟环境管理</a>
        </div>
    </div>

    {% with messages = get_flashed_messages() %}
        {% if messages %}
        <ul class="flash-messages">
            {% for message in messages %}
            <li class="flash-message">{{ message }}</li>
            {% endfor %}
        </ul>
        {% endif %}
    {% endwith %}

    <div class="system-resources">
        <h2>系统资源监控</h2>
        <div class="resource-grid">
            <div class="resource-card">
                <h3>CPU使用率</h3>
                <div class="progress-bar">
                    <div id="cpu-progress" class="progress"></div>
                </div>
                <div id="cpu-text">0%</div>
                <div id="cpu-cores">核心数: 0</div>
            </div>
            <div class="resource-card">
                <h3>内存使用率</h3>
                <div class="progress-bar">
                    <div id="memory-progress" class="progress"></div>
                </div>
                <div id="memory-text">0%</div>
                <div id="memory-details">已用: 0GB / 总计: 0GB</div>
            </div>
            <div class="resource-card">
                <h3>磁盘使用率</h3>
                <div class="progress-bar">
                    <div id="disk-progress" class="progress"></div>
                </div>
                <div id="disk-text">0%</div>
                <div id="disk-details">可用: 0GB / 总计: 0GB</div>
            </div>
            <div class="resource-card">
                <h3>运行中的脚本</h3>
                <div id="running-scripts">0</div>
            </div>
        </div>
    </div>

    <div class="container">
        <h2>已添加的脚本</h2>
        
        <!-- 搜索框 -->
        <div class="search-box">
            <form action="{{ url_for('manage_scripts') }}" method="get" class="search-form">
                <input type="text" name="search" value="{{ search_query }}" placeholder="搜索脚本名称、文件或虚拟环境..." class="search-input">
                <button type="submit" class="search-btn">搜索</button>
                {% if search_query %}
                    <a href="{{ url_for('manage_scripts') }}" class="clear-search">清除搜索</a>
                {% endif %}
            </form>
        </div>

        <!-- 脚本总数显示 -->
        <div class="scripts-count">
            总共 {{ total_scripts }} 个脚本
            {% if search_query %}
                (搜索结果)
            {% endif %}
        </div>

        <div class="table-container">
            <table class="scripts-table">
                <thead>
                    <tr>
                        <th>脚本名称</th>
                        <th>运行文件</th>
                        <th>虚拟环境</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for name, info in scripts.items() %}
                    <tr>
                        <td><strong>{{ name }}</strong></td>
                        <td>
                            <select id="file-{{ name }}" class="run-file-select" aria-label="选择运行文件">
                                {% for file in info.files %}
                                    {% if file.endswith('.py') %}
                                    <option value="{{ file }}" {% if file == info.main_file %}selected{% endif %}>
                                        {{ file }}
                                    </option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </td>
                        <td>
                            <select id="venv-{{ name }}" class="venv-select" onchange="changeVenv('{{ name }}', this.value)" aria-label="选择虚拟环境">
                                <option value="">系统Python</option>
                                {% for venv in venvs %}
                                <option value="{{ venv }}" {% if info.venv == venv %}selected{% endif %}>
                                    {{ venv }}
                                </option>
                                {% endfor %}
                            </select>
                        </td>
                        <td class="action-buttons">
                            <button class="run-btn" onclick="runScript('{{ name }}')">运行</button>
                            <a href="{{ url_for('manage_files', name=name) }}" class="manage-btn">管理文件</a>
                            <a href="{{ url_for('download_script', name=name) }}" class="download-btn">下载</a>
                            <a href="{{ url_for('delete_script', name=name) }}" class="delete-btn" onclick="return confirm('确定要删除这个脚本吗？')">删除</a>
                        </td>
                    </tr>
                    <tr class="output-row">
                        <td colspan="4">
                            <div id="output-{{ name }}" class="output-container"></div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页控件 -->
        {% if total_pages > 1 %}
        <div class="pagination">
            {% if current_page > 1 %}
                <a href="{{ url_for('manage_scripts', page=current_page-1, search=search_query) }}" class="page-btn">&laquo; 上一页</a>
            {% endif %}

            {% for p in range(1, total_pages + 1) %}
                {% if p == current_page %}
                    <span class="page-btn current">{{ p }}</span>
                {% elif p <= 3 or p >= total_pages - 2 or (p >= current_page - 1 and p <= current_page + 1) %}
                    <a href="{{ url_for('manage_scripts', page=p, search=search_query) }}" class="page-btn">{{ p }}</a>
                {% elif p == 4 or p == total_pages - 3 %}
                    <span class="page-dots">...</span>
                {% endif %}
            {% endfor %}

            {% if current_page < total_pages %}
                <a href="{{ url_for('manage_scripts', page=current_page+1, search=search_query) }}" class="page-btn">下一页 &raquo;</a>
            {% endif %}
        </div>
        {% endif %}

        <div class="script-jump">
            <label for="script-selector">快速跳转到脚本</label>
            <select id="script-selector" onchange="jumpToScript(this.value)">
                <option value="">选择脚本...</option>
                {% for name, info in scripts.items() %}
                <option value="{{ name }}">{{ loop.index }}. {{ name }}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
    <script>
    function jumpToScript(scriptName) {
        if (!scriptName) return;
        
        // 找到对应的脚本行
        const scriptRow = document.querySelector(`tr[data-script-name="${scriptName}"]`);
        if (scriptRow) {
            // 滚动到对应位置，并添加高亮效果
            scriptRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
            
            // 添加临时高亮效果
            scriptRow.style.transition = 'background-color 0.3s';
            scriptRow.style.backgroundColor = '#2d4d2d';
            
            // 展开对应的输出行
            const outputRow = document.getElementById(`output-row-${scriptName}`);
            const outputContainer = document.getElementById(`output-${scriptName}`);
            const toggleIcon = scriptRow.querySelector('.toggle-icon');
            
            if (outputRow && outputContainer) {
                outputRow.classList.remove('collapsed');
                outputContainer.classList.remove('collapsed');
                if (toggleIcon) {
                    toggleIcon.classList.remove('collapsed');
                }
                collapsedStates.delete(scriptName);
            }
            
            // 1秒后恢复原来的背景色
            setTimeout(() => {
                scriptRow.style.backgroundColor = '';
                setTimeout(() => {
                    scriptRow.style.transition = '';
                }, 300);
            }, 1000);
        }
    }

    // 添加键盘快捷键支持
    document.addEventListener('keydown', function(e) {
        // 按下 Ctrl + J 时聚焦到跳转选择框
        if (e.ctrlKey && e.key === 'j') {
            e.preventDefault();
            document.getElementById('script-selector').focus();
        }
    });
    </script>
</body>
</html> 